<template>
  <span class="compo-explain">
    <el-tooltip effect="dark" placement="top">
      <template #content> <slot /></template>
      <IconInfoCircle :size="size" color="#bbb" pointer tabindex="-1"> </IconInfoCircle>
    </el-tooltip>
  </span>
</template>
<script setup lang="ts">
import { IconInfoCircle } from "@tabler/icons-vue";

interface IProps {
  /** icon尺寸 */
  size: number;
}

const props = withDefaults(defineProps<IProps>(), {
  size: 16
});
</script>
<style lang="scss">
.compo-explain {
  display: inline-flex;
  vertical-align: text-top;
  svg {
    outline: none;
  }
}
</style>
